#{extends 'main.html' /}
#{set title:'Peungluang Intelligent System' /}

<script>
  
	$(function() {
		$( "#datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "@{'/public/images/icon_set_1_32x32/actions/1day.png'}",
			buttonImageOnly: true
		});
	});
  
</script>

<ul id="tabMasterData" class="tabs" data-tabs="tabs" >
  <li class="active"><a href="#MDTab1">Tab1</a></li>
  <li><a href="#MDTab2">Tab2</a></li>
  <li><a href="#MDTab3">TabN</a></li>
</ul>

<div class="pill-content" >
  <div class="tab-pane active" id="MDTab1">
    <form class="formMasterData">
      <div class="well" >
        <div class="row">
          <div class="well span6" style="height: 100%">
            <fieldset>
              <!--legend>Example form legend</legend-->
              <div class="clearfix">
                <label for="appendedInput">Field1</label>
                <div class="input">
                  <div class="input-append">
                    <input type="text" size="16" name="appendedInput" id="appendedInput" class="medium">
                    <label class="add-on active">
                      <img src="@{'/public/images/icon_set_1_32x32/actions/search.png'}" >
                    </label>
                  </div>
                </div>
              </div><!-- /clearfix -->
              <div class="clearfix">
                <label for="xlInput">Field2</label>
                <div class="input">
                  <input type="text" size="30" name="xlInput" id="xlInput" class="xspan3" style="width: 180px;">
                </div>
              </div><!-- /clearfix -->
              <div class="clearfix">
                <label for="appendedInput">Field3</label>
                <div class="input">
                  <div class="input-append">
                    <input type="text" size="16" name="appendedInput" id="datepicker" class="medium">
                    <label class="add-on active">
                      <img src="@{'/public/images/icon_set_1_32x32/actions/1day.png'}">
                    </label>
                  </div>
                </div>
              </div><!-- /clearfix -->
            </fieldset>
          </div>
          <div class="well span6" style="height: 100%">
            <fieldset>
              <!--legend>Example form legend</legend-->
              <div class="clearfix">
                <label for="mediumSelect">Field4</label>
                <div class="input">
                  <select id="mediumSelect" name="mediumSelect" class="medium">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select>
                </div>
              </div><!-- /clearfix -->
              <div class="clearfix">
                <label id="optionsCheckboxes">Field5</label>
                <div class="input">
                  <ul class="inputs-list">
                    <li>
                      <label>
                        <input type="checkbox" value="option1" name="optionsCheckboxes">
                        <span>Checkbox</span>
                      </label>
                    </li>
                  </ul>
                  <!--span class="help-block">
                    <strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
                  </span-->
                </div>
              </div><!-- /clearfix -->
              <div class="clearfix">
                <label id="optionsRadio">FieldN</label>
                <div class="input">
                  <ul class="inputs-list">
                    <li>
                      <label>
                        <input type="radio" value="option1" name="optionsRadios" checked="">
                        <span>Radio1</span>
                      </label>
                    </li>
                    <li>
                      <label>
                        <input type="radio" value="option2" name="optionsRadios">
                        <span>Radio2</span>
                      </label>
                    </li>
                  </ul>
                </div>
              </div><!-- /clearfix -->
            </fieldset>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div id="MDTab2" class="tab-pane" >Tab2 . . . </div>
  <div id="MDTab3" class="tab-pane" >Tab3  .  .  .  </div>
</div>

